<template>
  <div v-if="shopArr.length == 0">
    <el-empty>
      <template #description> 您还没有店铺,请点击按钮,去添加 </template>
      <el-button type="primary" @click="$router.push('/addShop')">
        添加店铺
      </el-button>
    </el-empty>
  </div>
  <div v-else class="box">
    <el-card>
      <template #header>
        <el-link>{{ businessInfo.contact }} 您的店铺列表</el-link>
        <el-button type="primary" @click="$router.push('/addShop')">
          添加店铺
        </el-button>
      </template>
      <div class="shop-list">
        <el-card class="shop-card" v-for="item in shopArr" :key="item.shopId">
          <template #header>
            <!-- 店铺名称 -->
            <h3 type="primary">{{ item.shopName }}</h3>
            <div>
              <el-button
                type="primary"
                @click="gotoFoodCategory(item.shopId)"
                v-if="item.status != 0"
              >
                查询菜品分类
              </el-button>
              <el-button type="danger" >修改</el-button>
              <el-button type="primary" v-if="item.status == 2">休息</el-button>
              <el-button
                type="success"
                v-else-if="item.status == 3 || item.status == 1"
              >
                营业
              </el-button>
              <el-button type="success" v-else-if="item.status == 4">
                整改
              </el-button>
            </div>
          </template>
          <div>
            <!-- 店铺的图片 -->
            <img :src="item.shopImg" alt="" width="100%" height="200" />
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">店铺介绍</div>
                </template>
                {{ item.shopExplain }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">店铺地址</div>
                </template>
                {{ item.shopAddress }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">起送费</div>
                </template>
                {{ item.startPrice }} 元
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">配送费</div>
                </template>
                {{ item.deliveryPrice }} 元
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">营业时间</div>
                </template>
                {{ item.startTime }} - {{ item.endTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">店铺状态</div>
                </template>
                <el-tag v-if="item.status == 0" type="danger">未审核</el-tag>
                <el-tag v-else-if="item.status == 1" type="success">
                  已审核
                </el-tag>
                <el-tag v-else-if="item.status == 2" type="primary">
                  营业
                </el-tag>
                <el-tag v-else-if="item.status == 3" type="info">歇业</el-tag>
                <el-tag v-else-if="item.status == 4" type="warning">
                  违规
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </div>
      <template #footer>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 3, 5, 10]"
          layout="total, sizes,  prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </el-card>

    
  </div>
 
</template>

<script>
import { shopListAPI } from "@/api/shop";
export default {
  data() {
    return {
      // 分页的参数:
      currentPage: 1,
      pageSize: 2,
      total: 0,
      // 商家的店铺数组
      shopArr: [],
      businessInfo: {},
      //弹窗
     
    };
  },
  methods: {
    // 点击添加菜品分类按钮
    gotoFoodCategory(shopId) {
      // 跳转到添加菜品分类的页面
      this.$router.push({
        path: "/foodCategory",
        // 将店铺的id传递过去
        query: {
          shopId,
        },
      });
    },
    handleSizeChange() {
      this.loadShopList();
    },
    handleCurrentChange() {
      this.loadShopList();
    },
    // 加载店铺列表
    loadShopList() {
      shopListAPI({
        // 商家的id
        businessId: this.businessInfo.id,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((resp) => {
        this.total = resp.data.total;
        this.shopArr = resp.data.datas;
      });
    },
    
  },
  created() {
    // 从本地存储中获取商家登录的信息
    let info = localStorage.getItem("loginInfo");
    if (!info) {
      // 从本地存储中没有获取到商家的信息，说明商家没有登录，踢回登录页面上
      this.$router.push("/businessLogin");
      return;
    }
    this.businessInfo = JSON.parse(info);
    this.loadShopList();
  },
};
</script>

<style scoped>
.shop-list {
  display: flex;
  justify-content: space-around;
}
.shop-card {
  width: 45%;
}
:deep(.el-card__header) {
  display: flex;
  justify-content: space-between;
}
</style>
